<script setup lang='ts'>
  import { nextTick, reactive, ref } from 'vue';
  import { propApi } from '@/api/controller';
  import { giftClassifyList } from '@/pinia/getter';
  import xmUpload from '@/components/Upload/xm-upload.vue';
  import { ToastSuccess, Toastloading } from '@/utils/public';
  import serachGift from '@/components/serachGift/index.vue';
  const formLabelWidth = '120px'
  const dataForm = ref()
  const $emit = defineEmits(['updateList'])
  const action = reactive({
    title:'',
    dialogFormVisible:false,
    disabled:false,
  })
  interface formQuert {
    name:string
    price:number
    gift_id:number
    wealth_num:number
    gift_type:number
    is_show:number
    gift_sort:number
    image:string
    gift_label_id:number
    animate_resource:string
    animate_resource_md5:string
    classification:number
    to_gift_id:number | any
    ext_data:string
    hot_num:number
  }
  let form = reactive({} as formQuert)
  const formRules = {
    name: [{ required: true, trigger: "blur", message: "礼物名不可为空" }],
    image: [{ required: true, trigger: "blur", message: "礼物图片不可为空" }],
    price: [{ required: true, trigger: "blur", message: "礼物价格不可为空" }],
    wealth_num: [{ required: true, trigger: "blur", message: "礼物富豪值不可为空" }],
    is_show: [{ required: true, trigger: "blur", message: "是否显示不可为空" }],
    gift_type: [{ required: true, trigger: "blur", message: "请选择礼物分类" }],
    to_gift_id: [{ required: true, trigger: "blur", message: "请选择抵扣礼物" }],
    hot_num: [{ required: true, trigger: "blur", message: "请输入热度值" }],
  }
  const giftTypeChange = (key:any = 0)=>{
    if(key == 4) form.price = 0
    if(key != 4) form.wealth_num = 0
  }
  const handleSubmit = ()=>{
    dataForm.value.validate(async(valid:any)=>{
      if(!valid) return
      const { gift_id = 0, gift_type } = form
      const submitForm = {...form}
      const loading = Toastloading()
      let submitSet = false
      // ext_data 拓展字段 { to_gift_id:彩蛋礼物id }
      if(gift_type == 9) {
        submitForm['ext_data'] = JSON.stringify({
          to_gift_id:form.to_gift_id
        })
        delete submitForm.to_gift_id
      }
      if (!gift_id) {
        await propApi.addGift(submitForm).then(() => {
          submitSet = true
          ToastSuccess('新增成功')
        }).catch(() => {
          loading.close()
        });
      }
      if (gift_id) {
        await propApi.updateGift(gift_id,submitForm).then(() => {
          submitSet = true
          ToastSuccess('编辑成功')
        }).catch(() => {
          loading.close()
        });
      }
      if (submitSet) {
        loading.close()
        $emit('updateList')
        closeDialog()
      }
    })
  }
  const openDialog = (query:any = {})=> {
    const {
      gift_id=0, name='', classification=1,
      price='', wealth_num=0, gift_type='', is_show=0, gift_label_id=0,
      gift_sort=1, image='', animate_resource='', animate_resource_md5='', ext_data={}, hot_num
    } = query
    const formobj = {
      gift_id,
      name,
      price,
      wealth_num,
      gift_type,
      is_show,
      gift_label_id,
      gift_sort,
      image,
      animate_resource,
      animate_resource_md5,
      classification, // 需后端移除接口中判断
    } as any
    if(typeof(ext_data) == 'object' && gift_type == 9) {
      const { to_gift_id, hot_num } = ext_data
      formobj['to_gift_id'] = to_gift_id
    }
    if(gift_type == 10)formobj['hot_num'] = hot_num
    Object.assign(form,{
      ...formobj
    })
    action.title = gift_id?'编辑礼物':'新增礼物'
    action.dialogFormVisible = true
  }
  const closeDialog = ()=>{
    form = reactive({} as formQuert)

    nextTick(() => {
      dataForm.value.clearValidate();
    });
    action.dialogFormVisible = false
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
    top="5vh"
    class="xm-dialog input-width"
    v-model="action.dialogFormVisible"
    :close-on-click-modal="action.disabled"
    :show-close="action.disabled"
    :close-on-press-escape="action.disabled"
    width="50%"
    :title="action.title">
      <el-form ref="dataForm" :model="form" :rules="formRules">
        <el-form-item :label-width="formLabelWidth" label="礼物名称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item v-if="form.gift_type != 4" :label-width="formLabelWidth" :label="form.gift_type == 9?'抵扣钻石数':'价格'" prop="price">
          <el-input v-model="form.price" type="number" />
        </el-form-item>
        <el-form-item v-if="form.gift_type == 4" :label-width="formLabelWidth" label="富豪值" prop="wealth_num">
          <el-input v-model="form.wealth_num" type="number" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="礼物分类" prop="gift_type">
          <el-select v-model="form.gift_type" @change="giftTypeChange" placeholder="请选择">
            <template v-for="item in giftClassifyList">
              <el-option v-if="item.addSet" :label="item.label" :value="item.type" />
            </template>
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.gift_type == 9" :label-width="formLabelWidth" label="抵扣礼物" prop="to_gift_id">
          <serachGift v-model:gift_id="form.to_gift_id" version="0.0.1" :show_gift_type="[5]" />
        </el-form-item>
        <el-form-item v-if="form.gift_type == 10" :label-width="formLabelWidth" label="热度值" prop="hot_num">
          <el-input v-model="form.hot_num" type="number" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="是否显示" prop="is_show">
          <el-select v-model="form.is_show" placeholder="请选择">
            <el-option label="否" :value="0" />
            <el-option label="是" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="礼物排序" prop="gift_sort">
          <el-input v-model="form.gift_sort" type="number" placeholder="请输入礼物排序" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="礼物图片" prop="image">
          <xmUpload
            v-model:file-url="form.image"
            :data="{
              md5:1,
              type:6,
            }"
          />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="礼物动画" prop="animate_resource">
          <xmUpload
            list-type="text"
            v-model:file-url="form.animate_resource"
            v-model:file-md5="form.animate_resource_md5"
            :data="{
              md5:2,
              type:6,
            }"
          />
        </el-form-item>
      </el-form>

      <template v-if="!action.disabled" #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="handleSubmit()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>